<script setup="">
import Card from "../../help/Card.vue";
import {nextTick,ref} from "vue";
import {EchartsOptions} from "../../help/index.js";

const id = ref(Math.random().toString(36).substring(2, 9))

const colorSet = ['#FF6550', '#FE8600', '#FED500', '#4D87FF','#CCFF99','#99CCCC','#CCCCFF']

const sameOptions = {
  type: 'pie',
  avoidLabelOverlap: false,
  labelLine: {
    show: false,
  },
  label: {
    show: false,
    formatter: (params) => { // 图例
      if (params.name !== '全部')
        return `{percent|${params.percent}}%\n{name|${params.name}}\n共${params.value}个`

      else return ''
    },
    fontSize: 14,
    color: '#FF8904',
    rich: {
      percent: {
        fontSize: 14,
        color: '#FF8904',
      },
      name: {
        fontSize: 13,
        color: '#FF8904', // 数字颜色调整
        padding: [5, 0],
      },
    },
  },
  emphasis: {
    scaleSize: 6, // 高亮后扇形放大尺寸
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
  },
}

const itemStyle = {
  color: '#EBEBEB',
}
const data = Array.from({ length: 7 }, (_, i) => {
  return {
    value: 100,
    name: `任务${i + 1}`,
    itemStyle: {
      color: colorSet[i],
    },
  }
})
const option = {
  title: { // 中间总数配置项
    text: `{val|${'任务比'}}`,
    top: 'center',
    left: 'center',
    textStyle: {
      rich: {
        name: {
          fontSize: 14,
          color: '#FF8904',
          padding: [5, 0],
        },
        val: {
          fontSize: 14,
          color: '#FF8904', // 数字颜色调整
        },
      },
    },
  },
  series: [
    {
      name: '一级',
      radius: ['90%', '100%'], // 内半径和外半径 空心圆
      data: [{
        ...data[0],
      }, {
        value: 0,
        name: '全部',
        itemStyle,
      }],
      ...sameOptions,
    },
    {
      name: '二级',
      radius: ['80%', '88%'], // 内半径和外半径 空心圆
      data: [
        {
          ...data[1],
        }, {
          value: 0,
          name: '全部',
          itemStyle,
        }],
      ...sameOptions,
    },
    {
      name: '三级',
      radius: ['70%', '78%'], // 内半径和外半径 空心圆
      color: ['green', 'blue'],
      data: [{
        ...data[2],
      }, {
        value: 0,
        name: '全部',
        itemStyle,
      }],
      ...sameOptions,
    },
    {
      name: '四级',
      radius: ['60%', '68%'], // 内半径和外半径 空心圆
      data: [{
        ...data[3],
      }, {
        value: 0,
        name: '全部',
        itemStyle,
      }],
      ...sameOptions,
    },
    {
      name: '五级',
      radius: ['50%', '58%'], // 内半径和外半径 空心圆
      data: [{
        ...data[4],
      }, {
        value: (data[4].value),
        name: '全部',
        itemStyle,
      }],
      ...sameOptions,
    },
    {
      name: '六级',
      radius: ['40%', '48%'], // 内半径和外半径 空心圆
      data: [{
        ...data[5],
      }, {
        value: (data[5].value),
        name: '全部',
        itemStyle,
      }],
      ...sameOptions,
    },
    {
      name: '七级',
      radius: ['30', '38%'], // 内半径和外半径 空心圆
      data: [{
        ...data[6],
      }, {
        value: (data[6].value),
        name: '全部',
        itemStyle,
      }],
      ...sameOptions,
    },
  ],
}

nextTick(() => {
  EchartsOptions(option,id.value)
})
</script>

<template>
  <Card class="flex flex-1 animate__animated animate__fadeInTopLeft" title="任务完成率">
    <div class="flex w-full h-full">
      <div class="basis-2/3 h-[90%] p-1" :id="id"/>
      <div class="basis-1/3 h-[90%] flex gap-y-3 items-center justify-center flex-col text-base">
        <div class="flex w-full items-center justify-center" v-for="(item,idx) in colorSet">
          <div
              class="w-[14px] h-[14px] mr-2"
              :style="{
            background: item,
            borderRadius: '50%'
        }"/>
          <span style="color:#4A5A7F">任务{{ idx + 1 }}</span>
        </div>
      </div>
    </div>
  </Card>
</template>
